<template>
    <div class="container">
        <div class="head">
            <div class="tab-bar row-b">
                <div :class="['tab-i', tabIndex === 0 ? 'tab-i-active' : '']" @click="onChoiceTab(0)">未拨打</div>
                <div :class="['tab-i', tabIndex === 1 ? 'tab-i-active' : '']" @click="onChoiceTab(1)">已拨打</div>
            </div>
        </div>

        <div class="list" v-if="tabIndex === 0">
            <no-data v-if="formObj.fromList.length === 0" content="暂无手机号"/>
            <div class="row-b list-i" v-for="(item) in formObj.fromList" :key="item.phone">
                <div class="align-flex">
                    <div class="phone">{{ item.phone }}</div>
                    <div class="tips-box" v-if="item.isBlacklist">免打扰</div>
                </div>
                <img class="phone-img" src="../../static/phone/phone.png" @click="onPhoneCall(item)" />
            </div>
        </div>

        <div class="list" v-if="tabIndex === 1">
            <no-data v-if="formObj.completeList.length === 0" content="暂无手机号" />
            <div class="row-b list-i" v-for="(item, index) in formObj.completeList" :key="index" @click="onCompletePhone(item)">
                <div>
                    <div class="align-flex">
                        <div class="phone">{{ item.phone }}</div>
                        <div class="tips-box" v-if="item.isBlacklist">免打扰</div>
                    </div>
                    <div class="time">拨号时间：{{ item.date }}</div>
                </div>
                <img class="phone-img" src="../../static/phone/phone.png" />
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { onLoad, onReachBottom } from "@dcloudio/uni-app"
import { ref } from 'vue'
import { confirm, dateFormat } from '@/utils/util'
import { queryPhoneList } from "@/api/phone"
import noData from '@/components/no-data/no-data.vue'
const formObj = ref({
    fromList: []
} as any)
const storageKey = ref('')
const tabIndex = ref(0)

const fromNum = ref(0)
const fromTotal = ref(0)

const completeNum = ref(0)
const completeTotal = ref(0)
onLoad((options) => {
    storageKey.value = options.key as string
    const { completeList, fromList } = uni.getStorageSync(options.key as string)
    formObj.value = uni.getStorageSync(options.key as string)
    fromTotal.value = Math.ceil(fromList.length / 100)
    completeTotal.value = Math.ceil(completeList.length / 100)

    console.log(fromTotal.value, 'fromTotalfromTotal')
    formObj.value.completeList = completeList.slice(completeNum.value * 100, (completeNum.value + 1) * 100)
    // fromList做分页操作 根据fromNum 一页100条 赋值到 formObj.value.fromList 列表中
    formObj.value.fromList = fromList.slice(fromNum.value * 100, (fromNum.value + 1) * 100)
    console.log(formObj.value, 'formObjformObj')
    getCompleteListSort()
})
// 完成数组的排序
const getCompleteListSort = () => {
    formObj.value.completeList.sort((a: { date: string }, b: { date: string }) => {
        return new Date(b.date).getTime() - new Date(a.date).getTime()
    })
}
const onPhoneCall = async (event: { phone: string, isBlacklist: boolean }) => {
    uni.makePhoneCall({
        phoneNumber: event.phone,
        success: async () => {
            const obj = uni.getStorageSync(storageKey.value as string)
            formObj.value.completeList.push({ ...event, date: dateFormat('YYYY-mm-dd HH:MM:SS', new Date()) })
            obj.completeList.push({ ...event, date: dateFormat('YYYY-mm-dd HH:MM:SS', new Date()) })
            formObj.value.fromList = formObj.value.fromList.filter((item: {phone: string, date:string}) => {
                return item.phone !== event.phone
            })
            obj.fromList = obj.fromList.filter((item: {phone: string, date:string}) => {
                return item.phone !== event.phone
            })
            // 根据本地存储的时间戳判断是否需要更新 （时间戳字段：creationTime） 1000000
            if ((new Date().getTime() - formObj.value.creationTime) > 10000000) {
                formObj.value.fromList = await queryPhoneList(formObj.value.fromList.map((item: { phone: string }) => { return item.phone }))
                obj.fromList = await queryPhoneList(obj.fromList.map((item: { phone: string }) => { return item.phone }))
            }
            uni.setStorageSync(storageKey.value, obj)
        }
    })
}
const onCompletePhone = async (event: { phone: string, isBlacklist: boolean }) => {
    uni.makePhoneCall({
        phoneNumber: event.phone,
        success: async () => {
            const obj = uni.getStorageSync(storageKey.value as string)
            // 通过数组的map方法，将点击过的电话从已拨打列表中删除 再更新date字段 后再更新
            formObj.value.completeList = formObj.value.completeList.map((item: { phone: string, date: string }) => {
                if (item.phone === event.phone) {
                    return { ...event, date: dateFormat('YYYY-mm-dd HH:MM:SS', new Date()) }
                } else {
                    return item
                }
            })
            // 重新再本地拿一份数组做处理 再排序后再更新
            obj.completeList = obj.completeList.map((item: { phone: string, date: string }) => {
                if (item.phone === event.phone) {
                    return { ...event, date: dateFormat('YYYY-mm-dd HH:MM:SS', new Date()) }
                } else {
                    return item
                }
            }).sort((a: { date: string }, b: { date: string }) => {
                return new Date(b.date).getTime() - new Date(a.date).getTime()
            })
            await getCompleteListSort()
            uni.setStorageSync(storageKey.value, obj)
        }
    })
}
// 切换tab
const onChoiceTab = (index: number) => {
    // formObj.value = uni.getStorageSync(storageKey.value as string)
    const { completeList, fromList } = uni.getStorageSync(storageKey.value as string)
    tabIndex.value = index
    // 重置数据数
    // fromNum.value = 0
    // completeNum.value = 0
    // 更新最多可 分页的数据数
    fromTotal.value = Math.ceil(fromList.length / 100)
    completeTotal.value = Math.ceil(completeList.length / 100)
    if (index === 1) {
        getCompleteListSort()
    }
}

// 触底事件
onReachBottom(() => {
    const { completeList, fromList } = uni.getStorageSync(storageKey.value as string)
    fromTotal.value = Math.ceil(fromList.length / 100)
    completeTotal.value = Math.ceil(completeList.length / 100)

    if (tabIndex.value === 0 && fromNum.value < fromTotal.value) {
        fromNum.value = fromNum.value + 1
        const arr = fromList.slice(fromNum.value * 100, (fromNum.value + 1) * 100)
        formObj.value.fromList.push(...arr)
    } else if (tabIndex.value === 1 && completeNum.value < completeTotal.value) {
        completeNum.value = completeNum.value + 1
        const arr = completeList.slice(completeNum.value * 100, (completeNum.value + 1) * 100)
        formObj.value.completeList.push(...arr)
    }
})

</script>

<style lang="scss" scoped>
.container {
    // height: 100vh;
    min-height: 100vh;
    background-color: #fafafc;
    @include padding(30rpx);
    overflow: auto;
}

.head {
    @include padding(4rpx);

    .tab-bar {
        background-color: #F4F4F7;
        border-radius: 40rpx;
        @include padding(4rpx);
    }

    .tab-i {
        width: 345rpx;
        height: 80rpx;
        border-radius: 40rpx;
        text-align: center;
        line-height: 80rpx;
        color: #565868;
        font-size: 28rpx;
    }

    .tab-i-active {
        background-color: #ffffff;
        color: #202536;
        font-size: 32rpx;
        font-weight: 600;
    }
}

.list {
    margin-top: 35rpx;
    .list-i {
        @include padding(30rpx 0);
        border-bottom: 1rpx solid #F4F4F7;
    }

    .phone {
        color: #202536;
        font-size: 32rpx;
        font-weight: 600;
        margin-right: 19rpx;
    }

    .tips-box {
        // @include padding(3rpx 15rpx);
        width: 102rpx;
        height: 46rpx;
        text-align: center;
        line-height: 46rpx;
        border: 1rpx solid #FF7642;
        background-color: #FFF1EC;
        color: #FF7642;
        border-radius: 8rpx;
        font-size: 24rpx;
    }

    .phone-img {
        width: 60rpx;
        height: 60rpx;
        margin-right: 30rpx;
    }

    .time {
        color: #565868;
        font-size: 24rpx;
        margin-top: 12rpx;
    }

}

.row-b {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.align-flex {
    display: flex;
    align-items: center;
}
</style>
